<template>
   <el-card class="box-card" style="margin: 10px 0px;">
    <template #header>
      <div class="card-header">
        <span style="font-size: 20px;">挂号订单</span>
       
      </div>
    </template>
   <el-form :inline="true" >
    <el-form-item label="就诊人">
        <el-select placeholder="请选择就诊人" v-model="patientId" @change="UserOrderInfo">
          <el-option :label="item.name" :value="item.id" v-for="item in partientArr" :key="item.id"></el-option>
       
        </el-select>
      
    </el-form-item>
    <el-form-item label="订单状态">
        <el-select placeholder="请选择订单状态" @change="UserOrderInfo"  v-model="orderStatus">
          <el-option label="全部数据" :value="''"></el-option>
          <el-option :value="item.status" :label="item.comment" v-for="item in OrderList" :key="item.status"></el-option>
          
        </el-select>
    </el-form-item>
   </el-form>
   <el-table border style="margin: 10px 0px;" :data="orderArr">
    <el-table-column label="序号" type="index" width="80px"></el-table-column>
     <el-table-column label="就诊时间" width="180px" align="center" prop="fetchTime"></el-table-column>
     <el-table-column label="医院" prop="hosname" width="180px" align="center"></el-table-column>
     <el-table-column label="科室" prop="depname"  width="180px" align="center"></el-table-column>
     <el-table-column label="医生" prop="title" width="100px" align="center"></el-table-column>
     <el-table-column label="服务费" prop = "amount" width="80"></el-table-column>
     <el-table-column label="就诊人" prop="patientName" width="100px" align="center"></el-table-column>
     <el-table-column label="订单状态" prop="param.orderStatusString" width="200px" align="center"></el-table-column>
     <el-table-column label="操作" width="150px">
      <template #="{row}">
        <span @click="goDetile(row)">详情</span>
      </template>
     </el-table-column>
   </el-table>
   <el-pagination
      v-model:current-page="pageNo"
      v-model:page-size="pageSize"
      :page-sizes="[10, 20, 30, 40]"
      
    
      :background="true"
      layout=" prev, pager, next, jumper,->,total, sizes"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
    <!-- 
        
     -->
  </el-card>
</template>

<script setup lang="ts">
import {ref,onMounted} from 'vue'
//引入路由对象
import { useRouter } from 'vue-router'
//引入接口
import { reqUserOrderInfo,reqGetOrderInfo,reqUserList } from '@/api/User';
//获取路由对象
let $router = useRouter();
let pageNo = ref<number>(1);
let pageSize = ref<number>(10);
let patientId = ref<string>('')
let orderStatus = ref<string>('');
let total = ref<number>(0);
//存储订单数据
let orderArr = ref<any>([])
//就诊人数据
let partientArr = ref<any>([])
//获取订单列表
let OrderList = ref<any>([])
//挂载时获取信息
onMounted(()=>{
  UserOrderInfo()
  getOrderList()
  getOrderInfo()
})
//获取用户信息
const UserOrderInfo = async ()=>{
  let result = await reqUserOrderInfo(pageNo.value,pageSize.value,patientId.value,orderStatus.value)
 if(result.code === 200) {
  orderArr.value = result.data.records
  total.value = result.data.total
 }
  
}
//当前页数发生变化
const handleCurrentChange = ()=>{
  UserOrderInfo()
}
//总页数发生变化
const handleSizeChange = ()=>{
  UserOrderInfo()
}
//跳转路由
const goDetile = (row:any)=>{
  //路由跳转
  $router.push({
    path:'orders',
    query:{
      id:row.id
    }
  })
}
//获取就诊人列表
const getOrderList = async ()=>{
  let result = await reqGetOrderInfo()
  partientArr.value = result.data
  
}
//获取订单列表
const getOrderInfo = async ()=>{
  let result = await reqUserList()
  OrderList.value = result.data
}
</script>

<style scoped>

</style>